<template>
  <div class="app-container">
    <el-form :inline="true" :model="search">
        <el-form-item label="ID">
          <el-input v-model="search.id"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="search.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="search.username"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="searchOn">查询</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetOn">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    
    <br />
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="80" prop="userId" />
      <el-table-column label="昵称" prop="nickname" align="center" />
      <el-table-column label="用户名" width="600" align="center" prop="username" />
      <el-table-column label="身份" width="110" align="center" prop="identity">
        <template slot-scope="scope">
          <!-- {{scope.row.identity}} -->
          {{getIdentity(scope.row.identity)}}
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center" prop="password"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="view(scope.row)">查看</el-button> -->
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteOk(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total,sizes,prev,pager,next" :total="total" :current-page.sync="search.pageCurrent" :page-size.sync="search.pageSize" :page-sizes="[10,20,30,40]" @size-change="fetchData" @current-change="fetchData"></el-pagination>
    <!-- <el-pagination layout="total,sizes,prev,pager,next" :total="total" :current-page.sync="search.pageCurrent" :page-size.sync="search.pageSize" :page-sizes="[10,20,30,40]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> -->
    <el-dialog title="编辑" :visible.sync="editVisible">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button @click="editOk">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加" :visible.sync="addVisible">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="addForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="addForm.identity">
            <el-option v-for="item in identityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button @click="addOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList,edit,delete1,insert } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      search: {
        id: null,
        nickname: '',
        username:'',
        pageSize: 10,
        pageCurrent: 1
      },
      searchReset: {
        id: null,
        nickname: '',
        username:'',
        pageSize: 10,
        pageCurrent: 1
      },
      total:0,
      editVisible:false,
      addVisible:false,
      editForm:{
        nickname:'',
        userId:0,
        username:'',
        password:''
      },
      addForm:{
        nickname:'',
        usernmae:'',
        password:'',
        identity:''
      },
      identityOptions:[{
        value:1,
        label:'管理员'
      },{
        value:2,
        label:'教师'
      },{
        value:3,
        label:'学生'
      },{
        value:4,
        label:'游客'
      }]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    view(row) {
      console.log(row)
    },
    edit(row) {
      console.log(row)
      this.editVisible=true
      this.editForm.nickname=row.nickname
      this.editForm.username=row.username
      this.editForm.userId=row.userId
      this.editForm.password=row.password
    },
    // handleSizeChange(){
    //   this.fetchData()
    // },
    // handleCurrentChange(){
    //   this.fetchData()
    // },
    // searchOn(){
    //   this.fetchData()
    // },
    resetOn(){
      this.search=this.searchReset
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList(this.search).then(response => {
        this.list = response.data.records
        this.total=response.data.total
        this.listLoading = false
      })
    },
    add(){
      this.addVisible=true
    },
    addCancel(){
      this.addVisible=false
    },
   addOk(){
      
      insert(this.addForm).then((success)=>{
        console.log(success)
        this.addVisible=false
        this.fetchData()
      })
    },
    getIdentity(i) {
      switch (i) {
        case 1:
          return '管理员'
        case 2:
          return '教师'
        case 3:
          return '学生'
        case 4:
          return '游客'
      }
    },
    editCancel(){
      this.editVisible=false
    },
    editOk(){
      
      edit(this.editForm).then((success)=>{
        console.log(success)
        this.editVisible=false
        this.fetchData()
      })
    },
    deleteOk(row){
      delete1(row.userId).then((success)=>{
        console.log(success)
        this.fetchData()
      })
    }
  }
}
</script>
